import React, { useState, } from 'react'
import { useNavigate } from 'react-router-dom'
import { usernameExist, reg } from '../services/user'
import {
    Form,
    Input,
    Button,
    AutoComplete,
    Card,
    Modal,
} from 'antd';
export default () => {
    // 跳转
    let navigate = useNavigate();
    let styleDiv = {
        width: "600px",
        height: "350px",
        margin: "auto",
        textAlign: "center",
        border: "1px solid #dcdcdc",
        borderRadius: "10px",
    }
    const [form] = Form.useForm();
    // 得到此时输入的用户名及密码
    const nameValue = Form.useWatch('username', form);
    const pwdValue = Form.useWatch('password', form);

    console.log({ nameValue }, { pwdValue });
    // 验证用户名是否存在
    const usernameValidator = async (_, value) => {
        console.log(value,);
        if (value) {
            let data = await usernameExist({ username: value });
            if (data.status == 0) {
                return Promise.resolve();
            }
            return Promise.reject(new Error('用户名已存在'));
        }
    }
    // 最后完成
    const onFinish = async (values) => {
        console.log('Received values of form: ', values);
        let data = await reg({ username: values.username, pwd: values.password });
        console.log(data);
        Modal.success({
            content: "注册成功",
            onOk() {
                navigate('/login');
            }
        })
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (

        <Card title="注册" style={{
            width: 600, margin: "auto",
            textAlign: "center",
            border: "1px solid #dcdcdc",
            borderRadius: "10px",
        }}>
            <Form style={{ textAlign: "left", }}
                name="reg"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 20,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    name="username"
                    label="用户名"
                    rules={[
                        { validator: usernameValidator },

                        {
                            required: true,
                            message: '用户名不能为空!',
                        },
                        {
                            pattern: /^\w{6,10}$/,
                            message: '用户名格式不正确!',
                        }

                    ]}
                    // 反馈图标
                    hasFeedback
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="password"
                    label="密码"
                    rules={[
                        // {validator:this.pwdValidator},
                        {
                            required: true,
                            message: '密码不能为空!',
                        },
                        {
                            pattern: /^\w{6,10}$/,
                            message: '密码格式不正确!',
                        }
                    ]}
                    hasFeedback
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="confirm"
                    label="确定密码"
                    dependencies={['password']}
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: '确认密码不能为空!',
                        },
                        {
                            pattern: /^\w{6,10}$/,
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }

                                return Promise.reject(new Error('两次输入的密码不一致！'));
                            },
                        }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 11,
                        span: 13,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        注册
                    </Button>
                </Form.Item>
            </Form>
        </Card>

    )
}